<template>
     <div>
        <div class="Title">周末去哪儿</div>
        <ul>
            <li class="listItem" 
                v-for="item of list"
                :key="item.id">
                <div class="item-img-wrapper">
                    <img class="item-img" :src="item.imgUrl" >
                </div>
                <div class="itemInfo">
                    <p class="itemTitle">{{item.title}}</p>
                    <p class="itemDesc">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'HomeWeekend',
    props: {
        list: Array
    }
}
</script>

<style lang='stylus' scoped>
    @import '~styles/maxins.styl'
    .Title
        line-height: .6rem
        background: #eee
        text-indent: .2rem
    .listItem
        overflow: hidden
        height: 3rem
        border-bottom 1px solid #999
        .item-img-wrapper
            overflow: hidden
            height: 0
            padding-bottom: 32.9%
            .item-img
                width: 100%
        .itemTitle
            line-height: .45rem
            font-size: .3rem
            ellipsis()
        .itemDesc
            line-height: .3rem
            color: #666
            ellipsis()
</style>
